import { reactive, ref } from "vue"
import { ElMessage } from 'element-plus'
import instance from "@/api"

export interface CancelDataType {
    order: string,
    customerName: string,
    serviceType: string,
    address: string,
    price: number
}

export default function(tableData: any, emit: any){
    const showCancelOrder = ref(false)
    let data: CancelDataType = reactive({
        order: "",
        customerName: "",
        serviceType: "",
        address: "",
        price: 0
    })
    let Id = -1
    function operateCancel({ row }: any){
        showCancelOrder.value = true
        const { id, order, customerName, address, serviceType, price } = row
        const obj = {
            order,
            customerName,
            serviceType,
            address,
            price
        }
        Object.assign(data, obj)
        Id = id  
    }
    async function cancelOrder(){
        const index = tableData.findIndex((item: { id: any }) => item.id === Id);
        tableData.splice(index, 1)
        emit('sendData', tableData)
        showCancelOrder.value = false
        const res = await instance.delete(`/api/order/deleteOrder?id=${Id}`)
        const { status } = res
        if(status === 200) ElMessage.success('取消成功')
        else ElMessage.error('取消失败')
    }
    return {
        showCancelOrder,
        operateCancel,
        data,
        cancelOrder
    }
}